<!--
 * @Descripttion: 
 * @version: 
 * @Author: 彭勃
 * @Date: 2023-03-29 13:31:49
 * @LastEditors: sueRimn
 * @LastEditTime: 2023-04-06 15:18:39
-->
<template>
  <EnteringForm
    ref="enteringForm"
    v-bind="dialog"
		width="60%"
    @close="close"
    @submit="submit"
  >
    <el-form ref="formRef" :model="queryParams" :rules="rules" label-width="120px">
      <el-row type="flex" style="flex-wrap: wrap">
				<el-col :xs="24" :sm="13" :lg="13">
          <el-form-item label="快递公司:" prop="expressCompany_1">
            <el-select
              v-model="queryParams.expressCompany_1"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option label="圆通快递" value="圆通快递"/>
              <el-option label="中通快递" value="中通快递"/>
              <el-option label="申通快递" value="申通快递"/>
              <el-option label="韵达快递" value="韵达快递"/>
              <el-option label="顺丰快递" value="顺丰快递"/>
              <el-option label="其他" :value="0"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="10" :lg="10" v-if="queryParams.expressCompany_1==0">
          <el-form-item prop="expressCompany_2" label-width="10px">
            <el-input
              v-model.trim="queryParams.expressCompany_2"
              placeholder="请输入快递公司名称"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="13" :lg="13">
          <el-form-item label="快递单号:" prop="expressNo">
            <el-input
              v-model.trim="queryParams.expressNo"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </EnteringForm>
</template>

<script setup>
import { getCurrentInstance, reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import { sendApi } from '@/api/order/supply.js'

const { proxy } = getCurrentInstance()
const emit = defineEmits(["success"]);
const dialogType = ref('')
const dialog = reactive({
  visible: false,
  title: "",
});
const rules = reactive({
  expressCompany_1: [{ required: true, message: "请选择", trigger: "change" }],
  expressCompany_2: [{ required: true, message: "请输入", trigger: "blur" }],
  expressNo: [{ required: true, message: "请输入", trigger: "blur" }],
});
const queryParams = ref({})

function init(type, record){
	dialogType.value = type
	dialog.title='发货'
	dialog.visible = true
	// 保存id
	queryParams.value.id = record.id
};

function close(){
  dialog.visible = false;
  proxy.$refs.formRef.resetFields();
	queryParams.value = {}
};
function submit() {
  proxy.$refs.formRef.validate((valid) => {
    if (valid) {
      let query = {
        id: queryParams.value.id,
        expressCompany: queryParams.value.expressCompany_1 ? queryParams.value.expressCompany_1 : queryParams.value.expressCompany_2,
        expressNo: queryParams.value.expressNo
      }
      sendApi(query).then((res) => {
        if (res.code == 200) {
          ElMessage.success("发货成功");
          close();
          emit("success",'edit');
        } else {
          ElMessage.error(res.message || "发货失败");
        }
      });
    }
  });
}
defineExpose({ init });
</script>

<style scoped>
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>
